<template>
  <div>
    <template v-for="(item, index) in optionList">
      <template>
        <span
          v-if="item.listClass == 'default' || item.listClass == ''"
          :key="item.dictValue"
          :index="index"
          :class="item.cssClass"
        >{{ item.dictLabel }}</span
        >
        <el-tag
          v-else
          :disable-transitions="true"
          :key="item.dictValue"
          :index="index"
          :type="item.listClass == 'primary' ? '' : item.listClass"
          :class="item.cssClass"
        >
          {{ item.dictLabel }}
        </el-tag>
      </template>
    </template>
  </div>
</template>

<script>

export default {
  name: 'DictTreeTag',
  props: {
    options: {
      type: Array,
      default: []
    },
    value: {
      type: [Array, String],
      default: null
    },
    allLabel: { // 是否展示全标签路径
      type: Boolean,
      default: false
    }
  },
  computed: {
    values() {
      if (this.value !== null && typeof this.value !== 'undefined') {
        return Array.isArray(this.value) ? this.value : [String(this.value)]
      } else {
        return []
      }
    },
    optionList() {
      const options = []
      for (let value of this.values) {
        const option = this.getDictLabel(this.options, value, null)
        options.push(option)
      }
      return options
    }
  },
  methods: {
    getDictLabel(options, dictValue, parentLabel) {
      for (let option of options) {
        if (option.dictValue === dictValue) {
          if(this.allLabel && parentLabel) {
            option.dictLabel = parentLabel + ' / ' + option.dictLabel
          }
          return option
        } else if (option.children && option.children.length > 0) {
          const dict = this.getDictLabel(option.children, dictValue, parentLabel ? parentLabel + ' / ' + option.dictLabel : option.dictLabel)
          if (dict) {
            return dict
          }
        }
      }
      return null
    }
  }
}
</script>
<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>
